<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成名片</title>

    <!-- 样式文件 -->
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="box">
        <!-- 左边 -->
        <div id="container">
            <div class="container-border">
                    <img id="img" style="width: 200px;height: 200px;" src="img/t.png" />
                    <div class="detail">
                        <span class="nickname">张三</span>
                        <span class="job">WEB前端工程师</span>
                    </div>
                    <div class="introduce">3年ToB类产品开发经验，经常跨部门沟通，能够站在产品角度考虑问题。
                        较强的执行力，能推动和协同其他人实现需求落地，并取得预期效果。
                        较强的产品思维，多次协助pm打造出优秀的项目。</div>
            </div>
        </div>

        <!-- 右边 -->
        <div class="rightConent">
            <div>
                <input class="file-input" type="file" name="avatar" />
                <div class="file-font">上传头像</div>
            </div>

            <div class="inputBox">
                <input name="nickname" type="text" value="张三" placeholder="请输入昵称" required />
                <input name="job" type="text" value="WEB前端工程师" placeholder="请输入职位" required />
                <input name="introduce" type="text" value="3年ToB类产品开发经验，经常跨部门沟通，能够站在产品角度考虑问题。 较强的执行力，能推动和协同其他人实现需求落地，并取得预期效果。 较强的产品思维，多次协助pm打造出优秀的项目。" placeholder="请输入个人简介" required />
                <input name="picname" type="text" value="" placeholder="生成名片图片名称" />
            </div>
            
            <div id="save">保存图片</div>
        </div>
    </div>
</body>
</html>

<!-- 引入第三方库 -->
<script src="./js/jquery.min.js"></script>

<!-- 截图插件 -->
<script src="./js/html2canvas.min.js"></script>

<!-- 业务逻辑的代码 -->
<script>
    // 给多个元素绑定输入事件
    $("input[name=nickname], input[name=job], input[name=introduce]").on('input', function(){
        // 当前操作元素的name属性和输入的value值
        // console.log($(this).prop('name'))
        // console.log($.trim($(this).val()))

        var name = $(this).prop('name')
        var value = $.trim($(this).val())

        // 将输入的内容给到制定的div元素 class元素
        $(`.${name}`).text(value)
    })


    // 更换图片 当文件有选择的时候就会触发事件
    $("input[name=avatar]").change(function(){
        // 获取到所选择的第一张图片
        var file = this.files[0]
        
        // 创建文件读取器对象
        var reader = new FileReader()

        // 让读取器读取文件
        reader.readAsDataURL(file)

        // 当文件读取成功后，去获取本地的访问路径
        reader.onload = function()
        {
            // 当已经读取到文件路径的时候，就设置img标签的src显示路径
            if(this.result)
            {
                $("#img").attr("src", this.result) //将图片赋值到img标签上面
            }
        }
    })


    // 保存名片事件
    $("#save").click(function(){
        var nickname = $.trim($("input[name=nickname]").val())
        var job = $.trim($('input[name=job]').val())
        var introduce = $.trim($('input[name=introduce]').val())

        if(!nickname)
        {
            alert("请输入姓名")
            $("input[name=nickname]").focus() // 焦点闪烁
            return false
        }

        if (!job) 
        {
            alert('请输入职业')
            $('input[name=job]').focus()
            return false
        }

        if(!introduce)
        {
            alert('请输入个人简介')
            $('input[name=introduce]').focus()
            return false
        }

        //更换内容
        $('.nickname').text(nickname)
        $('.job').text(job)
        $('.introduce').text(introduce)

        //图片名称
        let picname = $.trim($('input[name=picname]').val())
        picname = picname ? `${picname}.jpg` : "card.jpg"


        // 获取名片盒子的属性信息
        var container = document.getElementById("container")
        var width = container.offsetWidth  //元素的宽度
        var height = container.offsetHeight //元素的高度

        // 构建一个新的图片容器
        var canvas = document.createElement('canvas')
        var context = canvas.getContext('2d')

        //获取缩放比率
        var scale = GetPixelRatio(context);


        // 设置画布的宽和高
        canvas.width = width * scale
        canvas.height = height * scale
        canvas.style.width = width + 'px'
        canvas.style.height = height + 'px'
        context.scale(scale, scale)

        
        // console.log(width, height)
        // console.log(canvas.width, canvas.height)

        
        //设置准备截图的参数
        let opts = {
            scale: scale,
            canvas: canvas,
            width: width,
            height: height,
            dpi: window.devicePixelRatio
        };


        //调用插件页面截图
        html2canvas(container, opts).then(function(canvas){
            context.imageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;

            //将图片生成url地址信息(base64格式)
            let dataUrl = canvas.toDataURL('image/jpeg', '1.0')

            //将名片下载到本地的图片
            DataURIToBlob(picname, dataUrl)
        })
    })


    // 获取设备的PixelRatio 设备的缩放比率
    let GetPixelRatio = function (context) 
    {
        if(context)
        {
            let backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 0.5;
            return (window.devicePixelRatio || 0.5) / backingStore;
        }
    };

    // 数据转换下载图片
    let DataURIToBlob = function (picname, dataURI) 
    {
        //base64 转换为 blob格式
        let binStr = atob(dataURI.split(',')[1]),
            len = binStr.length,
            arr = new Uint8Array(len);

        for (let i = 0; i < len; i++) 
        {
            arr[i] = binStr.charCodeAt(i);
        }

        //转换blob数据
        var blob = new Blob([arr])

        //并创建a元素，进行下载
        var download = $("<a>")
            .attr("href", URL.createObjectURL(blob))
            .attr("download", picname)
            .appendTo("body")
            .on("click", function () {
                if (navigator.msSaveBlob) 
                {
                    return navigator.msSaveBlob(blob, picname);
                }
            });

        download[0].click();
        download.remove();
    }

</script>
